<template>
  <view>
    <image src="../../static/img/loginBg.png" mode="widthFix" class="bgimgBox"></image>
    <picker @change="languageChange" :value="index" :range="languageArray">
      <view class="languageBtn">
        <view class="">{{ languageArray[index] }}</view>
        <uni-icons type="arrowdown" size="14" color="#e9783b"></uni-icons>
      </view>
    </picker>
    <view class="s">
      asdfas
    </view>
    <view class="enterprise">
      <image src="../../static/img/gylogo.png" mode="widthFix"></image>
     <view class="cont">
       <view class="title">光裕集团</view>
       <view class="hint">GUANGYU GOURP</view>
     </view>
    </view>
    <image src="01" mode=""></image>
  </view>
</template>

<script>
export default {
  computed: {
    i18n() {
      return this.$t('userbinding');
    }
  },
  data() {
    return {
      languageArray: ['中文', '英文', '波兰语', '俄语', '捷克语', '罗马尼亚语', '西班牙语', '匈牙利语', '越南语'],
      index: 0
    };
  },
  onShow() {},
  onLoad(option) {},
  methods: {
    // 中文tabbar
    setZH() {
      uni.setTabBarItem({
        index: 0,
        text: '首页'
      });
      uni.setTabBarItem({
        index: 1,
        text: '分类'
      });
      uni.setTabBarItem({
        index: 2,
        text: '购物车'
      });
      uni.setTabBarItem({
        index: 3,
        text: '我的'
      });
    },
    //英文tabbar
    setEN() {
      uni.setTabBarItem({
        index: 0,
        text: 'home'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'category'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'cart'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'mine'
      });
    },
    //波兰语tabbar
    setPL() {
      uni.setTabBarItem({
        index: 0,
        text: 'Strona główna'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'kategoria'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'wózek'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'mój'
      });
    },
    //俄语tabbar
    setRU() {
      uni.setTabBarItem({
        index: 0,
        text: 'Главная страница'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'категория'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'Корзина'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'мой'
      });
    },
    //捷克语tabbar
    setCZ() {
      uni.setTabBarItem({
        index: 0,
        text: 'Domovská stránka'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'kategorie'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'Nákupní košík'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'můj'
      });
    },
    //罗马尼亚语tabbar
    setRO() {
      uni.setTabBarItem({
        index: 0,
        text: 'pagina principala'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'categorie'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'Cărucior de cumpărături'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'Ale mele'
      });
    },
    //西班牙语tabbar
    setES() {
      uni.setTabBarItem({
        index: 0,
        text: 'Página de inicio'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'categoría'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'Carrito de compras'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'mi'
      });
    },
    //匈牙利语tabbar
    setHU() {
      uni.setTabBarItem({
        index: 0,
        text: 'Főoldal'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'kategória'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'Bevásárlókocsi'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'az én'
      });
    },
    //越南语tabbar
    setVN() {
      uni.setTabBarItem({
        index: 0,
        text: 'Trang chủ'
      });
      uni.setTabBarItem({
        index: 1,
        text: 'thể loại'
      });
      uni.setTabBarItem({
        index: 2,
        text: 'Giỏ hàng'
      });
      uni.setTabBarItem({
        index: 3,
        text: 'của tôi'
      });
    },
    languageChange: function(e) {
      let pindex = e.target.value;
      console.log(pindex);
      //对应date中的languageArray
      if (pindex == 0) {
        // alert('中文')
        this.index = pindex;
        this.$i18n.locale = 'zh-CN';
        this.setZH();
      } else if (pindex == 1) {
        this.index = pindex;
        // alert('英文')
        this.$i18n.locale = 'en-US';
        this.setEN();
      } else if (pindex == 2) {
        this.index = pindex;
        this.$i18n.locale = 'bl-PL';
        // alert("波兰语")
        this.setPL();
      } else if (pindex == 3) {
        this.index = pindex;
        this.$i18n.locale = 'els-RU';
        // alert("俄语")
        this.setRU();
      } else if (pindex == 4) {
        this.index = pindex;
        this.$i18n.locale = 'jk-CZ';
        this.setCZ();
        // alert("捷克语")
      } else if (pindex == 5) {
        this.index = pindex;
        this.$i18n.locale = 'lm-RO';
        this.setRO();
        // alert("罗马尼亚语")
      } else if (pindex == 6) {
        this.index = pindex;
        this.$i18n.locale = 'xb-ES';
        this.setES();
        // alert("西班牙语")
      } else if (pindex == 7) {
        this.index = pindex;
        this.$i18n.locale = 'xy-HU';
        this.setHU();
        // alert("匈牙利语")
      } else if (pindex == 8) {
        this.index = pindex;
        this.$i18n.locale = 'yn-VN';
        this.setVN();
        // alert("越南语")
      }
    }
  }
};
</script>

<style lang="scss">
@import '../../static/css/login.scss';
.languageBtn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 200rpx;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  border: 1px solid #e9783b;
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  color: #e9783b;
}
.enterprise {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  top: 150rpx;
  left: 40rpx;
  image {
    width: 80rpx;
  }
  .cont {
    margin-left: 20rpx;
    .title {
      font-size: 40rpx;
      font-weight: bold;
    }
    .hint {
      color: #808080;
      font-size: 24rpx;
    }
  }
}
</style>
